<template>
  <div>
    <!-- 操作信息 -->
    <div class="actionInfo bb boxItem">
      <h4 class="withVerticleLineT4 title14">{{ $t('operationInfo') }}</h4>
      <div class="descBox">
        <div class="descColHalf">
          <div class="descItem">
            <span class="descTitle">{{ $t('applicant') }}</span>
            <span class="descValue">
              <table-ellipsis :text="info.createBy || '-'"></table-ellipsis>
            </span>
          </div>
        </div>
        <div class="descColHalf">
          <div class="descItem">
            <span class="descTitle">{{ $t('applicationTime') }}</span>
            <span class="descValue">
              <table-ellipsis :text="$commonFun.getDateTimeStr(info.createTime)"></table-ellipsis>
            </span>
          </div>
        </div>
      </div>
      <div class="descBox">
        <div class="descColFull">
          <div class="descItem">
            <span class="descTitle">{{ $t('remark') }}</span>
            <span class="descValue">
              <table-ellipsis :text="info.remark || '-'"></table-ellipsis>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 车型服务start -->
    <div class="baseInfo  boxItem">
      <h4 class="withVerticleLineT4 title14">{{ $t('vehicleModelService') }}</h4>
      <div class="descBox">
        <div class="descCol1">
          <!-- 车型代码 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('modelCode') }}</span>
            <span class="descValue">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="linkedInfo.modelCode || '-'"></table-ellipsis>
            </span>
          </div>
        </div>
        <div class="descCol2">
          <!-- 车型名称 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('modelName') }}</span>
            <span class="descValue">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="linkedInfo.modelName || '-'"></table-ellipsis>
            </span>
          </div>
        </div>
        <div class="descCol3">
          <!-- 版型 -->
          <div class="descItem">
            <span class="descTitle">{{ $t('stereotype') }}</span>
            <span class="descValue">
              <table-ellipsis :tableEllipsisIsTurnLine="false" :text="linkedInfo.trimLevel || '-'"></table-ellipsis>
            </span>
          </div>
        </div>
      </div>
      <!-- 车型服务列表 -->
      <div class="commonTableSty" style="margin-top:8px;">
        <a-table
          ref="table"
          :columns="columns"
          :data-source="linkedInfo.services"
          :pagination="{size:'small'}"
          rowKey="serviceId"
          size="default" >
          <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots">
            <table-ellipsis :text="text || '-'" :key="column.dataIndex"></table-ellipsis>
          </template>
          <template #serviceCode="text,record">
            <a @click="showServiceDetail(record)"><table-ellipsis :text="text"></table-ellipsis></a>
          </template>
          <template #presetOrNot="text">
            <table-ellipsis :text="$t(text === 1 ? 'yes' : 'no')"></table-ellipsis>
          </template>
          <template #whetherSold="text">
            <table-ellipsis :text="$t(text === 1 ? 'yes' : 'no')"></table-ellipsis>
          </template>
          <template #whetherActivated="text">
            <table-ellipsis :text="$t(text === 1 ? 'yes' : 'no')"></table-ellipsis>
          </template>
          <template #versionDepend="text,record">
            <a @click="handleVersionDepend(record)">{{ $t('view') }}</a>
          </template>
        </a-table>
      </div>
    </div>
    <!-- 车型服务end -->
    <service-version-depend :serviceId="serviceId" ref="versionDependRef">
    </service-version-depend>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { vehicleServiceTbColumns } from '../config/list'
import ServiceVersionDepend from '@/views/components/ServiceVersionDepend.vue'
export default {
  components: {
    TableEllipsis,
    STable,
    ServiceVersionDepend
  },
  props: {
    info: {
      type: Object,
      default () {
        return {

        }
      }
    },
    linkedInfo: {
      type: Object,
      default () {
        return {

        }
      }
    }
  },
  data () {
    return {
      columns: vehicleServiceTbColumns,
      serviceId: ''
    }
  },
  computed: {
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  methods: {
    handleVersionDepend (record) {
      this.serviceId = record.serviceId
      this.$refs.versionDependRef.visible = true
    },
    // 查看服务详情
    showServiceDetail (record) {
      this.$emit('clickdetail', { key: 'showServiceDetail', data: { serviceId: record.serviceId } })
    }
  }
}
</script>
